<template>
  <div class="login-form-container">

    <!-- 标题区域 -->
    <div class="form-title-wrapper">
      <el-text tag="h2" class="form-title">注册</el-text>
      <el-text class="form-subtitle">
        欢迎注册系统，请输入基础信息进入平台！
      </el-text>
    </div>

    <!-- 表单区域 -->
    <el-form :model="form" ref="loginFormRef" label-width="0px" class="login-form" :rules="formrules">

      <el-form-item prop="userName">
        <el-input v-model="form.userName" placeholder="请输入用户名" :prefix-icon="User" />
      </el-form-item>

      <el-form-item prop="idNumber">
        <el-input v-model="form.idNumber" placeholder="请输入身份证号" :prefix-icon="Notebook" />
      </el-form-item>

      <el-form-item prop="passWord">
        <el-input v-model="form.passWord" show-password placeholder="请输入密码" :prefix-icon="Lock" />
      </el-form-item>

      <el-form-item prop="gender">
        <el-select v-model.number="form.gender" popper-class="form-select" class="user-type-select" placeholder="请选择性别">
          <template #prefix>
            <el-icon>
              <User />
            </el-icon>
          </template>
          <el-option v-for="(item,index) in [{ name: '男', type: 0 }, { name: '女', type: 1 }]" :key="index" :label="item.name"
            :value="item.type" />
        </el-select>
      </el-form-item>



      <el-form-item prop="personType" class="last-input-item">
        <el-select v-model="form.personType" popper-class="form-select" class="user-type-select" placeholder="请选择人员类型">
          <template #prefix>
            <el-icon>
              <Grid />
            </el-icon>
          </template>
          <el-option v-for="item in seleArr" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button class="register-btn" type="default" @click="handleRegister(loginFormRef)">注册</el-button>
      </el-form-item>

      <el-form-item class="register-button-item">
        <div class="login-link-wrapper">
          <span class="login-link" @click="handleGoToLogin">登录</span>
        </div>
      </el-form-item>

    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Grid, Lock, Notebook, User, View, Hide } from '@element-plus/icons-vue'
import { postregister } from '@/api'
import { validateIdcard, validatePass } from "@/utils/validate"
import { useRouter } from 'vue-router'
const router = useRouter();

const seleArr = ['防化兵', '检验检疫人员', '防化部队', '反恐专家', '医疗队', '疾控专家']

const form = ref({
  userName: '',
  idNumber: '',
  passWord: '',
  gender: null,
  personType: ''
})

const formrules = ref({
  userName: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
    { min: 3, max: 20, message: '用户名长度必须在3-20个字符', trigger: 'blur' },
  ],
  idNumber: [
    {
      required: true,
      validator: validateIdcard,
      trigger: 'blur',
    },

  ],
  passWord: [
    {
      required: true,
      validator: validatePass,
      trigger: 'blur',
    },
  ],
  gender: [
    {
      required: true,
      message: '请输入性别',
      trigger: 'blur',
    },
  ],
  personType: [
    {
      required: true,
      message: '请选择人员类型',
      trigger: 'blur',
    },
  ],
})

const loginFormRef = ref(null)
const passwordVisible = ref()

const togglePasswordVisible = () => {
  passwordVisible.value = !passwordVisible.value
}

const handleGoToLogin = () => {
  loginFormRef.value.resetFields()
  router.push('/logins')
}

const handleRegister = async (elfrom) => {
  if (!elfrom) return
  await elfrom.validate(async (valid, fields) => {
    if (valid) {
      await postregister(form.value).then(res => {
        if (res.code === 200) {
          // ElMessage.success('注册成功')
          router.push('/logins')
          elfrom.resetFields()
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style scoped lang="less">
html,
body,
#app {
  height: 100%;
}

.login-form-container {
  height: 100%;
  width: 426px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-title-wrapper {
  margin-bottom: 25px;
}

.form-title {
  width: 60px;
  height: 42px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 30px;
  color: #FFFFFF;
  line-height: 42px;
  text-align: left;
  font-style: normal;
}

.form-subtitle {
  width: 411px;
  height: 28px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #8692A6;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  display: block;
  margin-top: 15px
}

.login-form :deep(.el-input__wrapper) {
  height: 64px;
  background-color: rgba(16, 23, 66, 0.6);
  border: 1px solid rgba(207, 224, 255, 0.46);
  border-radius: 4px;
  box-shadow: none;
}

.login-form :deep(.el-input__inner) {
  color: #ffffff; // 输入内容颜色
  font-size: 14px;
  font-family: '微软雅黑', sans-serif;
  background-color: transparent; // 避免内部再叠一层白底
}

.login-form :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5); // placeholder 颜色（略淡）
  font-size: 14px;
  font-family: '微软雅黑', sans-serif;
}

.login-form :deep(.el-form-item) {
  margin-bottom: 20px;
}

.password-toggle-icon {
  font-size: 18px;
  color: #aaa;
  cursor: pointer;
  transition: color 0.2s ease;
}

.password-toggle-icon:hover {
  color: #409EFF;
}


.login-btn {
  width: 426px;
}

.register-btn {
  width: 426px;
  height: 64px;
  background: #5871EB;
  border-radius: 4px;

  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  color: #ffffff;
  border: none !important;
}

.register-btn:hover {
  background-color: rgba(88, 113, 235, 0.65);
}

.login-link-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.login-link {
  color: #8692A6;
  ;
  cursor: pointer;
  font-size: 16px;
  display: inline;
  transition: color 0.2s;

  &:hover {
    color: #66b1ff;
  }
}

.login-text-item {
  justify-content: center;
}

// 输入框之间的通用间距是 20px
.login-form :deep(.el-form-item) {
  margin-bottom: 20px;
}

// 最后一个输入框与注册按钮的间距是 30px
.login-form :deep(.last-input-item) {
  margin-bottom: 30px;
}

// 注册按钮与登录直接的间距是 30px
.login-form :deep(.register-button-item) {
  margin-bottom: 30px;
}

:deep(.el-input__prefix) {
  font-size: 18px;
  color: #CFE0FF;
  margin-left: 4px; // 控制图标距离左边的距离
  margin-right: 4px; // 控制图标和文字的间距
}

:deep(.el-select .el-select__wrapper) {
  height: 64px;
  background: rgba(16, 23, 66, 0.6);
  border: 1px solid rgba(207, 224, 255, 0.46);
}

:deep(.el-select__placeholder) {
  color: RGBA(130, 142, 162, 1) !important;
}
</style>
